import Svg from "@/components/base/Svg"
import styled from "@emotion/styled"
import { ReactNode } from "react"

const Row = styled.div`
    display: flex;
    justify-content: space-between;
    height: 40rem;
    line-height: 40rem;
    padding: 0 16rem;
`

const Label = styled.span`
    color: #6b7280;
    font-weight: 500;
    font-size: 16rem;
    letter-spacing: 0%;
`

const Value = styled.span`
    color: #131416;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16rem;
    letter-spacing: 0%;
    text-align: right;
`

export const TransactionDetailRow = ({
    label,
    value,
    copyable = false,
}: {
    label: ReactNode
    value: ReactNode
    copyable?: boolean
}) => {
    const handleCopy = () => {
        if (typeof value === "string") {
            navigator.clipboard.writeText(value)
            alert(`Copied! ${value}`)
        }
    }

    return (
        <Row>
            <Label>{label}</Label>
            <Value>
                {value}
                {copyable && (
                    <Svg
                        src={"pages/TransactionStatusPage/icon_copy.svg"}
                        onClick={handleCopy}
                    />
                )}
            </Value>
        </Row>
    )
}
